<template>
	<view class="content">
		<view class="header" :style="'height:'+ tophight.height +';padding-top:'+tophight.padding">
			<view class="headera"></view>
			<view class="headerUni">
				<view class="goBack">
					<view class="icon" @click="goback()">
						<u-icon name="arrow-left" color="#FFFFFF" size="40"></u-icon>
					</view>
					<view class="cart">购物车</view>
					<view style="width: 10%;"></view>
				</view>
			</view>
		</view>
		<view class="cen">
			<view class="adm" @click="manages(flags)" v-if="flags==true">管理</view>
			<view class="adm" @click="manages(flags)" v-if="flags==false">关闭</view>

			<view class="article" v-for="(item,index) in datalist" :key="index">
				<delSlideLeft :item="item" :data_transit="{ index: index, item: item }" @delItem="delItem">
					<view class="articles">
						<view class="choice">
							<!-- <checkbox :checked="item.checked"></checkbox> -->
							<checkbox-group @change="changeitem(item)" checked>
								<checkbox :checked="item.checked" />
							</checkbox-group>
						</view>
						<view class="choiceImg">
							<!-- <image src="../../static/image/dian1.png" class="listImg"></image> -->
						</view>
						<view class="states">
							<view class="name">{{item.name}}</view>
				 		<view class="name1">规格:台</view>
							<view class="name2">
								<view class="buy">{{item.number}}</view>
								<view class="num">
									<view style="background: rgb(202,214,234);" @click="add(item.id)">+</view>
									<view>{{item.num}}</view>
									<view style="background: rgb(202,214,234);" @click="jian(item.id)">-</view>
								</view>
								<!-- <wm-numberBox :value='item.num' model="1" :min="1" @change="addShopCart($event, item, index)"></wm-numberBox> -->
							</view>
							<view class="name3">
								<button @click="shanchu(index)">{{item.sc}}</button>
							</view>
						</view>
					</view>
				</delSlideLeft>


				<u-gap height="20" bg-color="#bbb"></u-gap>
			</view>

		</view>
		<view class="footer">
			<view class="check">
				<checkbox-group @change="selectAll">
					<checkbox :checked="allChecked">全选</checkbox>
				</checkbox-group>
				<!-- <checkbox class="checks" :checked="allChecked"></checkbox> 全选 -->
			</view>
			<view class="money" v-if="flags==true">
				<view>实付款: ￥{{kuan}}</view>
				<view>券付款: {{quan}}</view>
			</view>
			<view class="submit" v-if="flags==true">
				<button>提交订单</button>
			</view>
			<view class="money" v-if="flags==false"></view>
			<view class="submit" v-if="flags==false">
				<button @click="shan">删除</button>
			</view>
		</view>
	</view>
</template>

<script>
	// import wmNumberBox from '../../components/uni-number-box/uni-number-box'
	export default {
		// components:{
		// 	wmNumberBox
		// },
		data() {
			return {
				quan: 0.00,
				flags: true,
				datalist: [{
						id: "111",
						name: '111Apple 电脑Apple 电脑Apple 电脑Apple 电脑Apple 电脑',
						num: 1,
						number: 100,
						numbers: 100,
						checked: false,
						stock: 50,
						sc: '删除',
					},
					{
						id: "222",
						name: '222Apple 电脑Apple 电脑Apple 电脑Apple 电脑Apple 电脑',
						num: 1,
						number: 100,
						numbers: 100,
						checked: false,
						stock: 50,
						sc: '删除',
					},
					{
						id: "333",
						name: '333Apple 电脑Apple 电脑Apple 电脑Apple 电脑Apple 电脑',
						num: 1,
						number: 100,
						numbers: 100,
						checked: false,
						stock: 50,
						sc: '删除',
					}
				],
				checkList: [], //选中值
				allChecked: false, //是否全选
				tophight: {
					height: '88rpx',
					padding: '0px'
				}
			}
		},
		onLoad() {
			// 小程序判断顶部导航栏适配，如不需要可以删除对应的顶部代码
			if (uni.getMenuButtonBoundingClientRect()) {
				this.tophight = uni.getMenuButtonBoundingClientRect()
				this.tophight.height = '140rpx'
				this.tophight.padding = '30rpx'
			} else {
				this.tophight.height = '88rpx'
				this.tophight.padding = '0rpx'
			}
			console.log(this.tophight)
		},
		//计算总价
		computed: {
			// 购物车商品总价
			kuan: {
				// 计算list列表中所有选中商品的价格
				get() {
					var sum = 0
					this.datalist.forEach(el => {
						if (el.checked) {
							sum = el.number + sum
						}
					})
					return sum
				},
				set(v) {
					this.sum = v
				}

			}
		},
		methods: {
			delItem() {
				let that = this;
				that.datalist.splice(e.data.index, 1);
			},
			// 管理
			manages(flags) {
				this.flags = !flags
				// console.log(this.flags)
			},
			// 增加商品数量
			add(id) {

				this.datalist.forEach(el => {
					if (el.id == id) {
						if (el.num < el.stock) {
							el.num++

							// 商品小计价格也要改变
							el.number = el.num * el.numbers
						} else {
							uni.showToast({
								title: '库存不足哦~',
								icon: 'none'
							})
						}
					}
				})
			},
			jian(id) {
				this.datalist.forEach(el => {
					if (el.id == id) {
						if (el.num > 1) {
							el.num--
							// 商品小计价格也要改变
							el.number = el.num * el.numbers
						} else {
							uni.showToast({
								title: '至少购买一件商品哦',
								icon: 'none'
							})
						}
					}

				})

			},
			goback() {
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					url: '../shopping/shoppingDetails'
				})
			},
			changeitem(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const cartList = this.datalist.every(item => {
						return item.checked === true
					})
					if (cartList) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
				var a
				this.datalist.forEach(item => {
					// console.log(item.checked)

					// item.checked ? this.kuan = this.kuan + item.number : this.kuan += 0
					if (item.checked) {
						a = item.number
					}
				})
				// console.log(this.kuan)
				this.kuan += a
				
			},
			//全选，全不选

			selectAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.datalist.map(item => {
						item.checked = true
						this.kuan += item.number
						console.log(this.kuan)
					})
				} else {
					this.datalist.map(item => {
						item.checked = false
						this.kuan = 0.00
					})
				}
			},
			// 删除
			shanchu(item) {
				// console.log(123)
				let that = this
				if (item.checked == true) {
					that.datalist.splice(item, 1)
				}

			}
		}
	}
</script>
<style>
	/* page{
		width: 100%;
		height: 100%;
	}
	::v-deep .uni-checkbox-input,.wx-checkbox-input {
		border-radius: 50% !important;
		color: #E70051 !important;
		background: url(../../static/image/check.png);
		border: 0;
		background-size: 100% 100%;
	}
	::v-deep .uni-checkbox-input-checked,.wx-checkbox-input-checked{
		background: url(../../static/image/checks.png);
		border: 0;
		background-size: 100% 100%;
	} */
</style>
<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background: #F5F5F5;
		position: relative;
		overflow: auto;
		box-sizing: border-box;

		.header {
			width: 100%;
			// height: 250rpx;
			height: 88rpx;
			// padding-top: 30rpx;
			background: #E70051;

			//.headera{
			//width:100%;
			//	height:50%;
			//	}
			.headerUni {
				width: 100%;
				height: 100%;
				display: flex;
				padding: 10rpx;

				.goBack {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #FFFFFF;

					.icon {
						width: 10%;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.cart {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.cen {
			width: 100%;
			height: auto;

			.adm {
				width: 100%;
				text-align: right;
				// display: flex;
				// justify-content: center;
				// align-items: center;

				padding: 20rpx;
				box-sizing: border-box;
			}

			.article {
				width: 100%;
				height: 230rpx;
				display: flex;
				flex-direction: column;

				.articles {
					flex: 1;
					display: flex;

					.choice {
						width: 10%;
						height: 100%;
						display: flex;
						justify-content: center;
						align-items: center;
						padding-left: 15rpx;

					}

					.choiceImg {
						width: 30%;
						height: 100%;
						padding: 30rpx;
						box-sizing: border-box;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.states {
						flex: 1;
						padding-top: 24rpx;
						font-size: 32rpx;

						.name {
							width: 400rpx;
							height: auto;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.name1 {
							font-size: 24rpx;
							padding-top: 30rpx;
						}

						.name2 {
							padding-top: 20rpx;
							// color: #E70051;
							display: flex;
							box-sizing: border-box;

							.buy {
								width: 60%;
							}

							.num {
								flex: 1;
								display: flex;
								height: 50rpx;
								padding-right: 20rpx;

								view {
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
								}
							}
						}

						.name3 {
							button {
								color: red;
								font-size: 24rpx;
							}

						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			width: 100%;
			height: 90rpx;
			background: #FFFFFF;
			bottom: 0;
			left: 0;
			display: flex;

			.check {
				width: 30%;
				height: 100%;
				display: flex;
				align-items: center;
				padding-left: 15rpx;
			}

			.money {
				flex: 1;
				display: flex;
				flex-direction: column;
				padding: 10rpx 20rpx 10rpx 0rpx;

				view {
					flex: 1;
				}

				text-align: right;
			}

			.submit {
				width: 30%;
				height: 100%;

				button {
					width: 100%;
					height: 100%;
					color: #FFFFFF;
					background-color: #E70051;
					font-size: 32rpx;
					border-radius: 0;
				}
			}
		}
	}
</style>
